<template>
  <el-drawer v-model="drawerVisible" title="标注点列表" direction="rtl" size="600px" :close-on-click-modal="false"
    @close="handleClose">
    <div class="annotation-drawer-content">
      <div class="drawer-header">
        <div class="list-stats">
          <el-icon class="stats-icon">
            <Location />
          </el-icon>
          <span class="stats-text">共 {{ pageConfig.total }} 个标注点</span>
        </div>
        <div class="list-actions">
          <el-button type="primary" size="small" @click="handleAddNew" :disabled="!allowAdd">
            <el-icon>
              <Plus />
            </el-icon>
            添加标注
          </el-button>
        </div>
      </div>
      <el-form :inline="true" :model="pageConfig" class="demo-form-inline">
        <el-form-item label="建筑名称">
          <el-input v-model="pageConfig.buildingName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 空状态 -->
      <div v-if="annotations.length === 0" class="empty-state">
        <el-empty description="暂无标注点" :image-size="120">
          <el-button type="primary" @click="handleAddNew" :disabled="!allowAdd">
            <el-icon>
              <Plus />
            </el-icon>
            添加第一个标注点
          </el-button>
        </el-empty>
      </div>

      <!-- 标注点列表 -->
      <div v-else class="annotation-cards drawer-scrollbar">
        <div v-for="(annotation, index) in annotations" :key="annotation.id" class="annotation-card" :class="{
          'editing': currentEditingId === annotation.id,
          'active': selectedId === annotation.id
        }" @click="handleSelectAnnotation(annotation)">
          <div class="card-header">
            <div class="card-index">{{ index + 1 }}</div>
            <h4 class="card-title">{{ annotation.buildingName || '未命名标注点' }}</h4>
            <div class="card-actions" @click.stop>
              <el-tooltip content="编辑" placement="top">
                <el-button type="primary" size="small" circle @click="handleEdit(annotation)">
                  <el-icon>
                    <Edit />
                  </el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button type="danger" size="small" circle @click="handleDelete(annotation.id)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </el-tooltip>
            </div>
          </div>

          <div class="card-content">
            <p class="card-description">
              {{ annotation.buildingIntroduction || '暂无描述信息' }}
            </p>
            <div class="card-position">
              <el-tag type="primary" size="small">
                <el-icon>
                  <Position />
                </el-icon>
                X: {{ annotation.largeScreenLeft || annotation.h5Left}}%
              </el-tag>
              <el-tag type="success" size="small">
                <el-icon>
                  <Position />
                </el-icon>
                Y: {{ annotation.largeScreenTop || annotation.h5Top }}%
              </el-tag>
            </div>
          </div>
        </div>
      </div>
      <el-pagination v-if="pageConfig.total" size="small" background layout="prev, pager, next" page-size="10"
        v-model:current-page="pageConfig.pageNum" v-model:page-size="pageConfig.pageSize" :total="pageConfig.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" class="mt-4" style="margin:0 auto" />
    </div>
  </el-drawer>
</template>

<script>
import { Location, Plus, Edit, Delete, Position } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { annotationApi } from "@/api"

export default {
  name: 'AnnotationListDrawer',
  components: {
    Location,
    Plus,
    Edit,
    Delete,
    Position
  },
  props: {
    // 控制抽屉显示
    visible: {
      type: Boolean,
      default: false
    },
    // 当前编辑的标注点ID
    currentEditingId: {
      type: [String, Number],
      default: null
    },
    // 当前选中的标注点ID
    selectedId: {
      type: [String, Number],
      default: null
    },
    // 是否允许添加新标注
    allowAdd: {
      type: Boolean,
      default: true
    },
    businessCode: {
      type: String,
      default: ''
    }
  },
  emits: ['update:visible', 'add-new', 'edit', 'delete', 'select', 'close'],
  data() {
    return {
      formInline: {},
      drawerVisible: false,
      pageConfig: {
        buildingName: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      annotations: []
    }
  },
  watch: {
    visible: {
      handler(newVal) {
        this.drawerVisible = newVal
        if (newVal) {
          this.getLists()
        }
      },
      immediate: true
    },
    drawerVisible(newVal) {
      this.$emit('update:visible', newVal)
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.pageConfig.pageNum = val
      this.getLists()
    },
    async getLists() {
      this.pageConfig.businessCode = this.businessCode
      const lists = await annotationApi.getList(this.pageConfig)
      console.log("标注列表", lists)
      this.pageConfig.total = lists.data.total
      this.annotations = lists.data?.records
    },
    onSubmit() { 
      this.getLists()
    },
    // 处理添加新标注
    handleAddNew() {
      this.$emit('add-new')
    },

    // 处理编辑标注
    handleEdit(annotation) {
      this.$emit('edit', annotation)
    },

    // 处理删除标注
    handleDelete(id) {
      const annotation = this.annotations.find(item => item.id === id)
      const title = annotation ? annotation.buildingName : '标注点'

      ElMessageBox.confirm(
        `确定要删除标注点"${title}"吗？此操作不可恢复！`,
        '删除确认',
        {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: false,
          // customClass: 'delete-confirm-dialog'
        }
      ).then(() => {
        this.$emit('delete', id)
        // ElMessage.success(`标注点"${title}"已删除`)
      }).catch(() => {
        // 用户取消删除
      })
    },

    // 处理选择标注点
    handleSelectAnnotation(annotation) {
      this.$emit('select', annotation)
    },

    // 处理关闭
    handleClose() {
      this.$emit('close')
    },

    // 外部调用：关闭抽屉
    close() {
      this.drawerVisible = false
    }
  }
}
</script>

<style scoped>
.annotation-drawer-content {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.drawer-header {
  padding: 0 0 20px 0;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.list-stats {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.stats-icon {
  font-size: 18px;
  color: #409eff;
  margin-right: 8px;
}

.stats-text {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.list-actions {
  display: flex;
  justify-content: flex-end;
}

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.annotation-cards {
  flex: 0.96;
  overflow-y: auto;
  padding-right: 4px;
}

.annotation-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  margin-bottom: 15px;
  background: white;
  transition: all 0.3s ease;
  overflow: hidden;
  cursor: pointer;
}

.annotation-card:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.annotation-card.editing {
  border-color: #e6a23c;
  background: #fdf6ec;
}

.annotation-card.active {
  border-color: #67c23a;
  background: #f0f9ff;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;
}

.card-index {
  background: #409eff;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  margin-right: 10px;
  flex-shrink: 0;
}

.annotation-card.editing .card-index {
  background: #e6a23c;
}

.annotation-card.active .card-index {
  background: #67c23a;
}

.card-title {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-actions {
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.annotation-card:hover .card-actions {
  opacity: 1;
}

.card-content {
  padding: 15px;
}

.card-description {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-position {
  display: flex;
  gap: 8px;
}

.card-position .el-tag {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .drawer-header {
    padding: 0 0 15px 0;
    margin-bottom: 15px;
  }

  .list-stats {
    margin-bottom: 10px;
  }

  .card-actions {
    opacity: 1;
    /* 移动端始终显示操作按钮 */
  }
}
</style>
